<template>
  <el-dialog
    :visible.sync="dialogConf.show"
    :width="dialogConf.width"
    @closed="closed"
  >
    <template #title>
      <div class="dialogTitle">{{ dialogConf.title }}</div>
    </template>
    <my-form
      ref="form"
      :layout="elRows"
      :model="model"
      :form-conf="formConf"
      :btn-conf="btnConf"
      @btnClick="btnClick"
    >
    </my-form>
  </el-dialog>
</template>

<script>
import { elRowsGetByName } from '@/components/common/common'
import MyForm from '@/components/base/myForm'

export default {
  name: 'Add',
  components: { MyForm },
  props: {
    dialogConf: {
      type: Object,
      default() {
        return { show: true, title: '新增', width: '800px' }
      }
    },
    model: {
      type: Object,
      default() {
        return {
          name: null,
          content: null,
          functionName: null,
          groupName: null
        }
      }
    }
  },
  data() {
    return {
      btnConf: {
        buttons: [{ name: '提交', type: 'primary' }, { name: '取消' }]
      },
      formConf: {
        labelWidth: '100px',
        rules: {
          name: [
            { required: true, message: '请输入模板名称', trigger: 'blur' }
          ],
          content: [
            { required: true, message: '请输入模板代码', trigger: 'blur' }
          ],
          functionName: [
            { required: true, message: '请输入所属功能', trigger: 'change' }
          ],
          groupName: [
            { required: true, message: '请输入组名', trigger: 'change' }
          ]
        }
      },
      elRows: [
        {
          elCols: [
            {
              span: 12,
              elFormItem: {
                prop: 'name',
                label: '模板名称',
                type: 'input'
              }
            }
          ]
        },
        {
          elCols: [
            {
              span: 12,
              elFormItem: {
                prop: 'functionName',
                label: '所属功能',
                type: 'autocomplete',
                options: []
              }
            }
          ]
        },
        {
          elCols: [
            {
              span: 12,
              elFormItem: {
                prop: 'groupName',
                label: '组名',
                type: 'autocomplete',
                options: []
              }
            }
          ]
        },
        {
          elCols: [
            {
              span: 23,
              elFormItem: {
                prop: 'content',
                label: '模板代码',
                type: 'textarea',
                autosize: { minRows: 6, maxRows: 10 }
              }
            }
          ]
        }
      ],
      functionTypes: null
    }
  },
  watch: {
    'model.functionName': {
      handler() {
        this.getTypes()
      },
      deep: true
    }
  },
  created() {
    this.getFunctionOptions()
  },
  mounted() {},
  methods: {
    async btnClick(btnItem) {
      try {
        if (btnItem.name === this.btnConf.buttons[0].name) {
          let validFlag = false
          this.$refs.form.$refs.form.validate((valid) => {
            validFlag = valid
          })
          if (validFlag) {
            const params = Object.assign({}, this.model)
            btnItem.loading = true
            const data = await this.$axios.post('/enjoy/insert', params)
            this.$message.success(data.msg)
            this.success()
          }
        } else if (btnItem.name === this.btnConf.buttons[1].name) {
          this.closed()
        }
      } catch (e) {
        console.log(e)
      } finally {
        btnItem.loading = false
      }
    },
    closed(...args) {
      this.$emit('closed', ...args)
    },
    success(...args) {
      this.$emit('success', ...args)
    },
    async getFunctionOptions() {
      const data = await this.$axios.post('/enjoy/selectFunctionTypes')
      const elCol = elRowsGetByName(this.elRows, 'functionName')
      elCol.elFormItem.options = data.data.functions
      this.functionTypes = data.data.functionTypes
      this.getTypes()
    },
    getTypes() {
      const elCol = elRowsGetByName(this.elRows, 'groupName')
      if (this.model.functionName) {
        if (this.functionTypes) {
          elCol.elFormItem.options = this.functionTypes[this.model.functionName]
        }
      } else {
        elCol.elFormItem.options = []
      }
    }
  }
}
</script>

<style scoped></style>
